<template>
  <div ref="listFilter" class="list-filter">
    <!-- 搜索区域 -->
    <headerSearch
      v-if="searchShow"
      ref="headerSearch"
      :fields="cFields"
      :default-search-fields="defaultSearchFields"
      @submit="submitFun"
      @keyup="keyupFun"
      @change="changeFun"
    />
    <!-- 功能按钮 -->
    <toolBar
      ref="toolBar"
      :fields="fields"
      :left-tool-tool-data="leftToolToolData"
      :style="cToolBarStyle"
      @rightBtnClick="rightBtnClickFun"
      @changFun="changFun"
    />
    <!-- 列表区域 -->
    <!-- {listChangeHeight:!isSearchShow} -->
    <div class="list" :class="cListCls">
      <portalTable
        ref="portalTable"
        v-loading="listLoading"
        :column-data="columnData"
        height="100%"
        :table-data="tableData"
        :has-selection="hasSelection"
        :has-index="hasIndex"
        :key-id="keyId"
        :single-selection="singleSelection"
        @selectFun="selectFun"
        @rowClick="rowClick"
      >
        <template v-for="item in cIsTemplate" :slot="item.prop" slot-scope="{data}">
          <slot :name="item.prop" :row="data.row" />
        </template>
      </portalTable>
    </div>
    <!-- 分页区域 -->
    <div class="page" :style="{textAlign: pagePostion}">
      <portalPagination
        v-show="listTotal>0"
        ref="page"
        :total="listTotal"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.limit"
        :page-sizes="pageSizes"
        @pagination="triggerGetList"
      />
    </div>
  </div>
</template>

<script>
import headerSearch from './headerSearch'
import toolBar from './toolBar'
import portalTable from '@/components/portalTable'
import portalPagination from '@/components/portalPagination'
export default {
  components: {
    headerSearch,
    toolBar,
    portalTable,
    portalPagination
  },
  props: {
    hasSelection: {
      type: Boolean,
      default: true
    },
    hasIndex: {
      type: Boolean,
      default: true
    },
    defaultSearchFields: { // 默认搜索数据
      type: Array,
      default() {
        return []
      }
    },
    fields: {
      type: Array,
      default() {
        return []
      }
    },
    pagePostion: {
      type: String,
      default: 'right'
    },
    leftToolToolData: {
      type: Array,
      default: () => []
    },
    highSearchFile: {
      type: Array,
      default: () => []
    },
    keyId: {
      type: String,
      default: 'ID'
    },
    pageSizes: {
      type: Array,
      default() {
        return [10, 20, 30, 50]
      }
    },
    searchShow: { // 是否展示搜索条件
      type: Boolean,
      default: true
    },
    singleSelection: { // 是否单选
      type: Boolean,
      default: false
    }
  },
  data() {
    const limit = this.pageSizes[0]
    return {
      isSearchShow: true,
      formData: {},
      tableData: [],
      listQuery: {
        page: 1,
        limit
      },
      listTotal: 0,
      listLoading: false,
      columnData: [],
      isHighSearch: false
    }
  },
  computed: {
    // 是否自定义模板
    cIsTemplate() {
      return this.fields.filter(v => v.isTemplate)
    },
    // 改变toolbarpaddingTop
    cToolBarStyle() {
      return {
        paddingTop: this.isSearchShow ? '0px' : '6px'
      }
    },
    // 搜索栏数据
    cFields() {
      return this.isHighSearch ? this.highSearchFile : this.fields
    },
    cListCls() {
      return {
        'listChangeHeight': !this.isSearchShow || !this.searchShow
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      if (!this.searchShow) {
        const data = [
          { type: 'refresh', content: '刷新数据', icon: 'el-icon-refresh-right', color: 'primary' },
          { type: 'hiddenColumn', content: '隐藏列', icon: 'el-icon-view' }
        ]
        this.$refs.toolBar.setRightToolData(data)
      }
    })
  },
  created() {
    const orinalFields = JSON.parse(JSON.stringify(this.fields))
    this.columnData = orinalFields.map(v => {
      const json = {
        prop: v.prop,
        label: v.label,
        isTemplate: v.isTemplate,
        hidden: false,
        mWidth: v.mWidth || 150,
        fixed: v.fixed || false,
        needPopover: v.needPopover || false,
        maxLength: v.maxLength || 0
      }
      return json
    })
    this.triggerGetList()
  },
  methods: {
    // 获取勾选的元素
    getCheckDataFun() {
      return this.$refs.portalTable.multipleSelection
    },
    keyupFun(formData) {
      this.formData = formData
      this.triggerGetList()
    },
    // 清楚选中状态
    clearSelection() {
      this.$refs.portalTable.clearSelection()
    },
    // 设置选中状态
    setSelectionData(row) {
      this.$refs.portalTable.setSelectionData(row)
    },
    // 复选框选中元素
    selectFun(data) {
      this.$emit('selectFun', data)
    },
    // 右侧工具栏按钮事件
    rightBtnClickFun(item) {
      const whiteFun = ['hiddenSearch', 'refresh', 'highSearch']
      const map = {
        hiddenSearch: this.hiddenSearchFun,
        refresh: this.refreshFun,
        highSearch: this.highSearchFun
      }
      if (whiteFun.includes(item.type)) {
        map[item.type]()
      }
    },
    // 高级搜索
    highSearchFun() {
      this.isHighSearch = !this.isHighSearch
    },
    // 隐藏顶部搜索栏
    hiddenSearchFun() {
      if (!this.searchShow) {
        return
      }
      this.isSearchShow = !this.isSearchShow
      this.$refs.headerSearch.setIsShowHeader(this.isSearchShow)
    },
    // 刷新表格数据
    refreshFun() {
      this.listQuery.page = 1
      this.triggerGetList()
    },
    // 切换的model
    changFun(val) {
      this.columnData.forEach(v => {
        if (val.includes(v.prop)) {
          this.$set(v, 'hidden', true)
        } else {
          this.$set(v, 'hidden', false)
        }
      })
      this.$refs.portalTable.doLayout()
    },
    // 点击搜索按钮
    submitFun(formData) {
      this.formData = formData
      this.listQuery.page = 1
      this.triggerGetList()
    },
    // 修改输入框的数据
    changeFun(formData) {
      this.formData = formData
      this.listQuery.page = 1
      this.triggerGetList()
      console.log(formData)
      this.$emit('formChange', formData)
    },
    rowClick(row) {
      this.$emit('rowClick', row)
    },
    search() {
      this.listQuery.page = 1
      this.triggerGetList()
    },
    triggerGetList() {
      this.listLoading = true
      this.$emit(
        'getList',
        this.listQuery.page,
        this.listQuery.limit,
        this.formData,
        data => {
          console.log(data)
          this.listTotal = data.total
          this.tableData = data.list
          this.listLoading = false
        }
      )
    }
  }
}
</script>

<style lang="less" scoped>
.list-filter {
  height: 100%;
  > .search {
    position: relative;
    border-bottom: 1px solid #eff2f6;
    .form {
      box-sizing: border-box;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      z-index: 10;
      padding: 15px;
      background-color: #fff;
      box-shadow: 2px 2px 2px #eee;
    }
    .form-item-wrap {
      display: inline-block;
    }
  }
  > .tools {
    padding: 10px 0;
    margin-bottom: 5px;
    .left {
      float: left;
    }
    .right {
      float: right;
    }
  }
  > .list {
    margin-bottom: 15px;
    height: calc(100% - 52px - 45px - 80px);
    .operating {
      .el-button {
        margin-bottom: 4px;
      }
      .el-button + .el-button {
        margin-left: 8px;
      }
    }
  }
  > .listChangeHeight {
    height: calc(100% - 45px - 80px) !important;
  }
}
</style>